<script setup>
import { ref } from 'vue';

// 模拟随笔数据
const essays = ref([
  {
    id: 1,
    content: '向前走，别回头。迎着风，别问路。带着梦，别认输。',
    date: '2024-02-06',
    likes: 23,
    comments: [
      { id: 1, user: 'Sara', avatar: 'https://picsum.photos/50', content: '写得真好！', date: '2024-02-06 14:30' },
      { id: 2, user: 'Tom', avatar: 'https://picsum.photos/51', content: '感同身受', date: '2024-02-06 15:20' }
    ],
    showComments: false
  },
  {
    id: 2,
    content: '不是每一个人都能成为自己想要的样子，但每个人都可以努力成为更好的自己。',
    date: '2024-02-05',
    likes: 15,
    comments: [
      { id: 3, user: 'Lucy', avatar: 'https://picsum.photos/52', content: '说得对！', date: '2024-02-05 10:15' }
    ],
    showComments: false
  }
]);

// 新评论
const newComment = ref('');

// 切换评论显示
const toggleComments = (essay) => {
  essay.showComments = !essay.showComments;
};

// 添加评论
const addComment = (essay) => {
  if (!newComment.value.trim()) return;
  
  essay.comments.push({
    id: Date.now(),
    user: 'POETIZE',
    avatar: 'https://picsum.photos/53',
    content: newComment.value,
    date: new Date().toLocaleString()
  });
  
  newComment.value = '';
};

// 点赞
const toggleLike = (essay) => {
  essay.likes += 1;
};
</script>

<template>
  <div class="essay-page">
    <div class="essay-list">
      <div v-for="essay in essays" :key="essay.id" class="essay-card">
        <div class="essay-content">{{ essay.content }}</div>
        <div class="essay-footer">
          <span class="date">{{ essay.date }}</span>
          <div class="actions">
            <button class="action-btn like" @click="toggleLike(essay)">
              <i class="icon-heart"></i>
              <span>{{ essay.likes }}</span>
            </button>
            <button class="action-btn comment" @click="toggleComments(essay)">
              <i class="icon-message"></i>
              <span>{{ essay.comments.length }}</span>
            </button>
          </div>
        </div>
        
        <!-- 评论区 -->
        <div v-show="essay.showComments" class="comments-section">
          <div class="comments-list">
            <div v-for="comment in essay.comments" :key="comment.id" class="comment-item">
              <img :src="comment.avatar" :alt="comment.user" class="comment-avatar">
              <div class="comment-content">
                <div class="comment-header">
                  <span class="comment-user">{{ comment.user }}</span>
                  <span class="comment-date">{{ comment.date }}</span>
                </div>
                <div class="comment-text">{{ comment.content }}</div>
              </div>
            </div>
          </div>
          
          <div class="comment-input">
            <input 
              type="text" 
              v-model="newComment"
              placeholder="写下你的评论..."
              @keyup.enter="addComment(essay)"
            >
            <button @click="addComment(essay)">发送</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
.essay-page {
  padding: 80px 20px 20px;
  max-width: 800px;
  margin: 0 auto;

  .essay-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.1);

    .essay-content {
      font-size: 1.1rem;
      line-height: 1.6;
      color: #333;
      margin-bottom: 15px;
    }

    .essay-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding-top: 10px;
      border-top: 1px solid #eee;

      .date {
        color: #999;
        font-size: 0.9rem;
      }

      .actions {
        display: flex;
        gap: 15px;

        .action-btn {
          display: flex;
          align-items: center;
          gap: 5px;
          padding: 5px 10px;
          border: none;
          background: none;
          color: #666;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            color: #42b983;
          }

          i {
            font-size: 1.2rem;
          }
        }
      }
    }

    .comments-section {
      margin-top: 20px;
      padding-top: 20px;
      border-top: 1px solid #eee;

      .comments-list {
        .comment-item {
          display: flex;
          gap: 15px;
          margin-bottom: 15px;

          .comment-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            object-fit: cover;
          }

          .comment-content {
            flex: 1;

            .comment-header {
              display: flex;
              justify-content: space-between;
              margin-bottom: 5px;

              .comment-user {
                font-weight: 500;
                color: #333;
              }

              .comment-date {
                font-size: 0.9rem;
                color: #999;
              }
            }

            .comment-text {
              color: #666;
              line-height: 1.5;
            }
          }
        }
      }

      .comment-input {
        display: flex;
        gap: 10px;
        margin-top: 15px;

        input {
          flex: 1;
          padding: 10px;
          border: 1px solid #ddd;
          border-radius: 4px;
          outline: none;

          &:focus {
            border-color: #42b983;
          }
        }

        button {
          padding: 0 20px;
          border: none;
          border-radius: 4px;
          background: #42b983;
          color: white;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background: #3aa876;
          }
        }
      }
    }
  }
}
</style> 